<template>
	<view class="column" style="padding:30upx 28upx 140upx 28upx;justify-content: space-between;height: 100%;">
		<view class="">
			<view class="t-t">请选择充值金额</view>
			<view class="row" style="flex-wrap: wrap;padding-top: 20upx;">
				<view class="item column center" v-for="(item, index) in 6" :key="index" :class="{ active: currentIndex == index }" @tap="changeCurrent(item, index)">
					<view class="item-t">购:1000</view>
					<view class="item-t">得:1040</view>
				</view>
			</view>
		</view>

		<view class="t-m">1.储值余额不可提现，不计利息； 2.储值余额仅限在本小程序使用 3.使用说明，后台可编辑，纯文本</view>
		<view class="" style="width: 100%;">
			<view class="t-btn">立即充值</view>
			<view class="row center" style="padding-top: 50upx;">
				<u-icon name="checkmark-circle" color="#00A69C" size="30"></u-icon>
				<view class="row" style="padding-left: 10upx;">
					<text class="x-r">我已阅读并同意</text>
					<navigator class="x-y" url="/pages/public/webView?type=3&title=会员储值协议">《会员储值协议》</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentIndex: 0
		};
	},
	methods: {
		changeCurrent(item, index) {
			this.currentIndex = index;
		}
	}
};
</script>
<style>
page {
	height: 100%;
}
</style>

<style scoped lang="scss">
.t-t {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #949494;
}
.item {
	width: 218upx;
	height: 139upx;
	background: #f7f6fb;
	border-radius: 10upx;
	margin-bottom: 20upx;
	margin-right: 20upx;
}
.item:nth-child(3n) {
	margin-right: 0;
}
.item-t {
	font-size: 26upx;
	font-weight: bold;
	color: #89888b;
	line-height: 38upx;
}
.active {
	background: #2781a7 !important;
	.item-t {
		color: #ffffff !important;
	}
}
.t-m {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #cccccc;
	line-height: 40upx;
	margin: 50upx 0;
}
.t-btn {
	width: 100%;
	height: 80upx;
	text-align: center;
	line-height: 80upx;
	border: 1px solid #fe2525;
	border-radius: 40upx;
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #fe2525;
}
.x-r,
.x-y {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
}
.x-r {
	color: #999999;
}
.x-y {
	color: #424556;
}
</style>
